<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导航栏示例</title>
<!--  <link rel="stylesheet" type="text/css" href="style.css">-->
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .sidebar {
      flex: 1;
      background-color: #333;
      color: #fff;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar li {
      margin: 0;
      padding: 10px;
      border-bottom: 1px solid #666;
    }

    .sidebar li a {
      color: #fff;
      font-size: 18px;
      text-decoration: none;
    }

    .sidebar li a.active, .sidebar li a:hover {
      color: #ff0;
    }

    .main {
      flex: 5;
      background-color: #f0f0f0;
    }

    .page {
      display: none;
      padding: 20px;
    }

    .page.active {
      display: block;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="../js/login.html" class="active">页面一</a></li>
      <li><a href="register.html">页面二</a></li>
      <li><a href="#">页面三</a></li>
    </ul>
  </div>
  <div class="main">
    <div class="page active">
      <h2>页面一</h2>
      <p>这是页面一的内容。</p>
    </div>
    <div class="page">
      <h2>页面二</h2>
      <p>这是页面二的内容。</p>
    </div>
    <div class="page">
      <h2>页面三</h2>
      <p>这是页面三的内容。</p>
    </div>
  </div>
</div>
<!--<script src="script.js"></script>-->
</body>
<script>
  var sidebarLinks = document.querySelectorAll('.sidebar li a');
  var pages = document.querySelectorAll('.page');

  sidebarLinks.forEach(function(link, index) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector('.sidebar a.active').classList.remove('active');
      this.classList.add('active');
      document.querySelector('.page.active').classList.remove('active');
      pages[index].classList.add('active');
    });
  });
</script>
</html>